import React from 'react'
import MobileNavigator from '../components/MobileNavigator'
import MobileMyBanner from '../components/MobileBanner'
import MobileMyAvatar from '../components/MobileMyAvatar'
import Kefu from '../components/Kefu'
import MobileCopyright from '../components/MobileCopyright'
import Info from '../components/Info'
import styles from '../styles/Home.module.scss'
import MobileProductItem from '../components/MobileProductItem'
import MobileShoppingCart from '../components/MobileShoppingCart'
function MobileHome() {
  return (
    <>
      {/* 顶部banner */}
      <MobileMyBanner />
      {/* 导航 */}
      <MobileNavigator />
      {/* 头像 */}
      <MobileMyAvatar />
      {/* 主体 */}
      <div className="container" style={{ marginBottom: '35vw' }}>
        <Info />
        <div className={styles.moneyAdd}>
          <p>请选择一个角色进行充值</p>
          <div className={styles.myForm}>
            <div>
              <select>
                <option value="0">角色1</option>
                <option value="1">角色2</option>
                <option value="2">角色3</option>
              </select>
            </div>
            <div>
              <button>确 认</button>
            </div>
          </div>
          <p>请在购买前确认对应充值角色</p>
        </div>
        <div className={styles.line}></div>

        <div className={styles.selectTitle}>
          <span>请选择商品</span>
        </div>
        <div className={styles.selectCont}>
          <p>
            每个商品首次购买都可获得该商品额外0.5倍的加赠奖励。
            <br />
            在官网充值不影响游戏应用内商品的首充奖励次数。
          </p>
        </div>
        <div className="mobileProductList">
          <MobileProductItem />
          <MobileProductItem />
          <MobileProductItem />
        </div>
      </div>
      <MobileShoppingCart />
      {/* 客服 */}
      <Kefu />
      {/* 版权 */}
      <MobileCopyright />
    </>
  )
}

export default MobileHome
